<template>

	<!-- 头部 -->
	<div class="home">
		<!-- 顶部 -->
        <Header/>
		<!-- 内容部分 -->
		<div class="conne">
			<!-- 类别 -->
			<div v-if=" ranking &&  ranking.length>0" class="centers diybgc" style="width:100%;position:relative">
				<!-- <img src="../assets/img/3.webp" style="width:100%;height:60px;opacity:.4;position:absolute;" alt=""> -->
				<div class="titleTag" style="position:relative;z-index:1;">
					<div  class="juming" :class=" {tap_active2 : ranking[0].children[0].choose}" @click.stop="getvideoList(0,0)">
						<img src="../assets/img/xinyin.png" style="width:30px;" alt="">{{ranking[0].children[0].label}}
					</div>
					

				</div>
				<div class="titleTag" style="position:relative;z-index:1;">
					<div  class="juming" :class=" {tap_active2 : ranking[0].children[1].choose}" @click.stop="getvideoList(0,1)">
						<img src="../assets/img/jingdian.png" style="width:30px;" alt="">{{ranking[0].children[1].label}}
					</div>
				</div>
			</div>
			<div class="m-auto pt-20 w-100 " style="width:80%;margin:0 auto;">
				<ul v-if="ranking &&  ranking.length>0">
					<li :class="{ tagsize16 : (index> 1) , tagsize20 : index == 1 }" class="pointer flex classtype" v-for="item,index in ranking" :key="item.id" v-if="index != 0" style="margin-bottom:8px;">
						
						<span>{{ item.name }}</span>

						<ul class="flex w-80 flex-wrap " style="margin-left:10px;align-items: center;">
							<li class="pointer textcolor" :class=" {tap_active : items.choose}"
								style="padding:0 12px;" v-for="items,index2 in item.children" :key="items.label"
								@click.stop="getvideoList(index,index2)">

								{{ items.label  }}
							</li>
						</ul>
					</li>
				</ul>
			</div>



			<!-- 内容 -->
			<div class="container mb_container">
				<!-- 短视频热榜 -->
		
					<div class="d-flex a-center video-title mt-15 mb-10">
						<!-- <div class="d-flex title-text font-md3 font-weight"> {{index == 'newData' ? '短视频热榜' : '精彩短视频'}}</div> -->
						<div class="d-flex title-text font-md3 font-weight"> </div>
						<div v-if="videoList" class="d-flex flex-row">
							<el-button class="mr-5 diybtn"  size="medium" @click.stop="clickOrder()">
								下单
							</el-button>
							<el-dialog title="订单"
								:visible.sync="  dialogVisible"
								width="500px">
								<el-form class="dialogForm" :model="dataForm" :rules="dataRule" ref="dataForm"
									label-width="100px" size="medium" :inline="false" labelSuffix="：">
									<el-form-item prop="phone" label="手机号码">
										<el-input v-model="dataForm.phone" v-phone-number  type="text" name="phone"
											placeholder="请输入你的手机号码"></el-input>
									</el-form-item>
								</el-form>
								<span slot="footer" class="dialog-footer">
									<el-button
										class="cancellbtn"
										@click=" dialogVisible = false"
										size="medium">
										取 消
									</el-button>
									<el-button class="diybtn" size="medium" :disabled="!isValid" @click.stop="toOrder()">
										下单
									</el-button>
								</span>
							</el-dialog>
							<el-button class="diybtn"  size="medium" @click.stop="chooseData()">
								选择
							</el-button>
						</div>

					</div>

					<el-row :gutter="20" v-if="videoList">
						<el-col v-for="(item2, index2) in videoList" :key="index2" :xs="24" :sm="12" :md="6" :lg="4">
							<el-card class="position-relative cardMain rounded8" :body-style="{ padding: '0px' }"
								shadow="hover" @click.native="detail(index2)">
								<div class="position-absolute top-0 w-100 h-100"
									v-show="showNewCheckbox">
									<el-checkbox @click.native="diystop($event)" v-model="item2.checked"
										label=""></el-checkbox>
								</div>
								<div class="cardimage">
									<el-image style="width:100%;height:100%" :src="item2.cover" fit="cover"></el-image>
									<!-- <div class="hidecard" ></div> -->
								</div>
								
								
								<div class="px-10 py-8">
									<div class="cardNameText">
										<a  href="#" :title="item2.name">{{ item2.name }}</a>
										<!-- {{ item2.name }} -->
									</div>
									
									
									<div class="cardNameInt" ref="cardNameInt">
										{{ textContents(item2.introduction) }}
									</div>
								</div>
							</el-card>
						</el-col>
					</el-row>
                    <div v-if="videoList.length == 0 " class="nodata">
                        <img src="../assets/img/empty.png" alt="">
                        <span class="diy_tip" >暂无数据</span>
                    </div>
					<div v-if="	current_page!=1 && current_page ==last_page" style="width:100%;height:200px;display: flex;align-items: center;justify-content: center;">

						<div style="width: 300px;margin: 40px auto;text-align: center;cursor: pointer;height: 40px;line-height: 40px;border-radius: 3px;font-size: 15px;color: #00cc4c;background-color: hsla(0,0%,100%,.04);">已经到底啦~</div>
					</div>
			
			</div>
			
		</div>
		<div class="CustomerService clear">
            <!-- <a href="#" class="CustomerService_list fl" title="">
                <div class="CustomerService_list_title">
                    <dd><img src="images/email.png" style="width: 20px;height: 20px;" /></dd>
                    <dt>Contact</dt>
                </div>
                <div class="CustomerService_list_down zoomIn animated">
                    Mail：copy@qq.com
                </div>
            </a> -->
            <!-- <a href="#" class="CustomerService_list fl" title="">
                <div class="CustomerService_list_title">
                    <dd><img src="images/bn57.png" /></dd>
                    <dt>
                        address
                    </dt>
                </div>
                <div class="CustomerService_list_down zoomIn animated">
                    Zhongkong Building
                </div>
            </a> -->
            <a href="#" class="CustomerService_list fl" title="">
                <div class="CustomerService_list_title">
                    <dd><img src="../assets/img/wx.png" style="width:30px;" /></dd>
                    <dt>
                        客服1
                    </dt>
                </div>
                <div class="CustomerService_list_down zoomIn animated">
                    <img src="../assets/img/qiyeweixin1.png" />
                </div>
            </a>

			<a href="#" class="CustomerService_list fl" title="">
                <div class="CustomerService_list_title">
                    <dd><img src="../assets/img/wx.png" style="width:30px;" /></dd>
                    <dt>
                        客服2
                    </dt>
                </div>
                <div class="CustomerService_list_down zoomIn animated">
                    <img src="../assets/img/qiyeweixin2.png" />
                </div>
            </a>
            <!-- <a href="#" class="CustomerService_list fl scroll-top" title="">
                <div class="CustomerService_list_title">
                    <dd><img src="images/bn59.png" /></dd>
                    <dt>TOP</dt>
                </div>
            </a> -->
        </div>

	
	</div>
</template>

<script>
import Vue from 'vue';
// 自定义指令
Vue.directive('phone-number', {
  bind(el, binding, vnode) {
    el.addEventListener('input', function(event) {
      const phoneNumber = event.target.value;
      // 进行手机号校验，这里可以使用正则表达式或其他校验方法
      if (!/^[1][3-9]\d{9}$/.test(phoneNumber)) {
        // 如果手机号不合法，可以进行相应的处理，比如显示错误信息
        console.log('Invalid phone number');
        vnode.context.isValid = false; // 设置为不合法
      } else {
        vnode.context.isValid = true; // 设置为合法
      }
    });
  }
});


	import {
		epiList,
		homelist,
		OrderApi,
		topList,
		videoLists,
		bannerList
	} from '@/api/home';
    import Header  from '../components/header.vue';
	import {isMobile} from '@/libs/validate';
	import jsCookie from 'js-cookie';
	import { computed } from 'vue';
	// import { mapMutations , mapGetters } from 'vuex';
	let shuaxin = true;
	let diyarr = [];
	export default {
		name: 'Home',
		components: {Header}, 

		data() {
          
			return {
				shuaxin:true,
                phoneNumber: '',
                isValid: true, // 默认为合法
                arrid:[],
				showOriginalData: true,
				chudi: false,
				current_page: 1,
				last_page: 1,
				isLoading: false,
				showoldDataCheckbox: false,
				showNewCheckbox: false,
				keepVideoList: [],
				videoList: [],
				oldData_ids: [],
				newData_ids: [],
				value: '',
				ranking: [],
				videoListData: [],
				old_dialogVisible: false,
				new_dialogVisible: false,
				dialogVisible:false,
				id: '',
				oldData: [],
				newData: [],
				dataSearch: {
					ranking: '',
					tag: '',
					pay_type: '',
					page: 1,
					pageSize: 10,
				},
				dataForm: {
					phone: '',
					playletIds: [],
				},
             
			};
		},
		computed: {
			dataRule() {
				var validateMobileAsync = (rule, value, callback) => {
                    //^[1][3-9]\d{9}$
					if (/\S/.test(value) && !isMobile(value)) {
						return callback(new Error('手机号码格式有误！'));
                       
					}
                    console.log(183)
					callback();

				};
				return {
					phone: [{
						required: false,
						validator: validateMobileAsync,
						trigger: ['blur', 'change'],
					}, ],
				};
			},
			textContents() {
				return ((item)=>{
					const div = document.createElement('div');
					div.innerHTML = item;
					// console.log(241,div.textContent)
					return div.textContent;
				})
			},
		},
		beforeRouteEnter(to,from,next){
			let taht = this
			console.log(284,from,to)
			console.log(297,from.path=="/")
			if(from.path!=="/" && from.path!=="/login"){
				console.log(287)
				shuaxin = false

			}else{
				console.log(296)
				shuaxin = true
			}
			next()
		},
		created() {

			if(shuaxin){  //shuaxin 是判断在哪个页面进来，需不需要重新获取数据
				console.log(316,shuaxin)
				this.navList();
				this.AllList();
			}else{
				let obj = this.$store.state.tag.pageobj
				let keepVideoList = this.$store.state.tag.keepVideoList
				console.log(309,keepVideoList.length==0)
				if(keepVideoList.length==0){ //避免直接打开某个页面后退到首页时取缓存
					this.navList();
					this.AllList();
				}else{  
					console.log(318,this.$store.state.tag.pageobj)
					this.ranking = obj.ranking;
					this.videoList = obj.videoList;
					this.last_page = obj.last_page
					this.current_page = obj.current_page
					this.showOriginalData = obj.showOriginalData
					this.arrid = obj.tagarrid
				}
			}
		},
		mounted() {
			window.addEventListener('scroll', this.handleScroll)
		},

		beforeDestroy(){
			console.log(339)
			//记录 当前页的操作 （当前页，最后一页，标签列表数据，视频列表数据 ，是不是原数据 ，选中的标签id数组  ）
			let current_page = this.current_page;
			let last_page = this.last_page;
			let ranking = this.ranking;
			let videoList = this.videoList;
			let showOriginalData = this.showOriginalData;
			let tagarrid = this.arrid;
			this.$store.commit('setpage',{
				current_page,
				last_page,
				ranking,
				videoList,
				showOriginalData,
				tagarrid
			})
			window.removeEventListener('scroll', this.handleScroll);
		},
		watch: {
			// oldData: {
			//     handler(newVal) {
			//         let oldData_ids = [];
			//         newVal.forEach(item => {
			//             if (item.checked) oldData_ids.push(item.id);
			//         });
			//         this.oldData_ids = oldData_ids;
			//         console.log(this.oldData_ids);
			//     },
			//     deep: true,
			// },
		},
		methods: {
	
			handleScroll(e) {
	
		

				console.log(256)
				let scrollTop = window.pageYOffset || document.documentElement.scrollTop || document.body.scrollTop;
				let windowHeight = window.innerHeight || document.documentElement.clientHeight;
				let documentHeight = document.documentElement.scrollHeight;
				if (documentHeight - 20 <= scrollTop + windowHeight && !this.chudi && !this.showOriginalData && this.last_page > this.current_page) {
				this.chudi = true;
				this.loadData();
				}

			},
			loadData() {
				let that = this;
				// 模拟异步加载数据
                
		
					//let copy = JSON.parse(JSON.stringify(that.videoList.newData))
					console.log('模拟异步加载数据')
                    console.log('current_page',this.current_page)
                    console.log('last_page',this.last_page)
                  
                    
                    videoLists({
                        "tag_ids": that.arrid,
                        "page":that.current_page+1
                    })
                    .then(res => {
                        console.log(346, res)
                        let data = res.data;
                        data.length>0 && data.forEach(item=>{
                            item.checked = false;
                        });
                        that.current_page = data.current_page;
                        that.last_page = data.last_page;
                        that.videoList =  [...that.videoList,...data.data] 
                        that.chudi = false;
                        //  console.log(353,that.videoList.newData)
                    })
                    .catch(err => {
                        console.log(err)
                    })
                    
                    this.current_page +=1 
			},
			chooseData() { //选择
				this.videoList.forEach(item => {
						item.checked = false
				})
				this.showNewCheckbox = !this.showNewCheckbox;
			},

			// 获取首页数据
			async AllList() {
				let { data } = await homelist();
				if (data) {
					
					data.homeList && data.homeList.forEach(item=>{
						item.checked = false
					})
				
					this.videoList = data.homeList
					this.$store.commit('setkeepVideoList',data.homeList)
					this.keepVideoList = JSON.parse(JSON.stringify(data.homeList))
					console.log(256, this.keepVideoList)

				}
			},

			async getvideoList(index, index2) { //标签点击
				let that = this
				var arrid = [];
				that.ranking[index].children.forEach((item, i) => {
					if (i == index2) {
						item.choose = !item.choose; //标记选中标签
						if (item.choose) { //把每级选中的对应id添加
							that.ranking[index].select = item.value;

						} else {
							that.ranking[index].select = null;
						}
					} else {
						item.choose = false
					}
				})
				that.ranking.forEach(item => {
					if(item.select){
						arrid.push(item.select)
					}
				})
                that.arrid = arrid;
				console.log(423,that.ranking)
				console.log(458,that.arrid)
				that.gettaglist(arrid)
			},

		
			gettaglist(arr) {	//根据选择tag标签获取videoList
				console.log('arrid', arr)
				let that = this;
				if (arr.length > 0) {
					this.showOriginalData = false
					videoLists({"tag_ids": arr})
                    .then(res => {
                        console.log(346, res)
                        let data = res.data;
                        data.data.length>0 && data.data.forEach(item=>{
                            item.checked = false;
                        });
                        that.current_page = data.current_page;
                        that.last_page = data.last_page;
                        that.videoList = data.data
                    })
                    .catch(err => {
                        console.log(err)
                    })
				} else {
					this.showOriginalData = true;
					let arr = this.$store.state.tag.keepVideoList
					console.log(495,arr)
					this.videoList = JSON.parse(JSON.stringify(arr)) ;
				}

			
			},
			// 获取标签
			async navList() { 
				let { data } = await topList();
                data.length > 0 && data.forEach(item => {
						item.select = null;
						item.children.forEach(child => {
							child.choose = false
						})
				})
				this.ranking = data;
				console.log(390,this.ranking)
			},


			homePage() {
                location.reload();
				// this.$router.push({
				// 	path: '/Modern',
				// });
			},
			or() {
				this.$router.push({
					path: '/Order',
				});
			},

			Tologin() {
				this.$router.push({
					path: '/login',
				});
			},
			//视频详情
			detail(index) {

				if (this.showNewCheckbox) { //如果打开了选择面板，点击则不会跳转到详情
					let videoList = this.videoList
					videoList[index].checked = !videoList[index].checked
					return;
				}
				this.goToWebPlayer(this.videoList[index].id);
			},
			diystop(event) { //checkbox选择阻止冒泡
				event.stopPropagation()
			},

			goToWebPlayer(id) {
				this.$router.push({
					path: '/WebPlayer',
					query: {
						id,
					},
				});
			},
			clickOrder() { //下单判断
				let list = this.videoList
				let count = 0;
				list.forEach(item => {
					if (item.checked) {
						count += 1;
					}
				})
				if (count == 0) {
					return this.$message({
						message: '请先选择下单视频',
						type: 'warning',
					});
				}
				this.dialogVisible = true
			},

     
			async toOrder() { //提交订单

				console.log(347,this.isValid)
				console.log(this.videoList);
                if(this.isValid){
                    var idarr = [];
					// let itemdata = [];
					this.videoList.forEach(item => {
						if (item.checked) {
							idarr.push(item.id)

							// itemdata.push(item)
						}
					})
					this.dataForm.playletIds = idarr;
					console.log(571,this.dataForm)
		
					

					OrderApi(this.dataForm)
					.then(res => {
						if(res.code==200){
							console.log(578,res)
							let diyarr = JSON.parse(localStorage.getItem('orderList')) || []
							diyarr.push(res.data)
							localStorage.setItem('orderList',JSON.stringify(diyarr))
							// if(diyarr && diyarr.length>0){
							// 	diyarr = [...diyarr,...res.data]
							// 	console.log(111)
							// 	localStorage.setItem('orderList',JSON.stringify(diyarr))
							// }else{
							// 	localStorage.setItem('orderList',JSON.stringify(res.data))
							// 	console.log(222)
							// }
							console.log(356, JSON.parse(localStorage.getItem('orderList')))

							return this.$message({
								message: res.message,
								type: 'success',
							});
							
						}

						
					})
					.catch(err => {
						console.log(err);
					});

					this.dialogVisible = false 
					this.chooseData()
                }else{
                    return this.$message({
                            message: '请输入正确手机号',
                            type: 'warning'
                	})
				}
				
			},
		},
	};
</script>
<style scoped>
	.home {
		margin: 0;
		padding: 0;
		box-sizing: border-box;
		background: #14161a!important;
		overflow-x: hidden;
	}

	.w {
		width: 90%;
		margin: auto;
	}

	.dialogForm {
		width: 460px;
	}
	.el-card{
		overflow: initial !important;
	}

	.cardMain {
		border: 0px solid #ebeef5;
		margin-bottom: 2em;
		cursor: pointer;

		
	}
    .cardimage {
			display: block;
			width: 100%;
			height: 300px;
	}



    .cardNameInt {
        margin-top: 0.1em;
        color: #999999;
		height: 20px;
		overflow: hidden;
		white-space: nowrap;
		text-overflow: ellipsis;
    }
	.hidecard{
		position: absolute;
		top: 0;
		/* bottom: 0;
		left: 0;
		right: 0; */
		width: 100%;
		height: 100%;
		background: red;
		visibility: hidden;
		border-radius: 4px;
		opacity: 0;
	}

	/* .cardimage:hover .hidecard{
	
		animation-name: showcard;
		animation-duration: 1s;
		opacity: .6;
		transform: scale(1.05);
		visibility:visible;
	} */
	@keyframes showcard{
		0%{
			opacity: 0;
			transform: scale(1);
			visibility: hidden;
		}
		100%{
			opacity: .6;
			transform: scale(1.05);
			visibility:visible;
		}
	}
	.cardNameText{
		overflow: hidden;
		white-space: nowrap;
		text-overflow: ellipsis;
	}
	.cardNameText a{
		color: #18191e;;
		font-size: 16px;
	}
	.cardNameText a:hover{
		color: #00cc4c;
	}
	.play-menu {
		margin: 0 10px;
		font-size: 15px;
		line-height: 60px;
		color: #ffffff;
		white-space: nowrap;
	}

	.play-menu:hover {
		cursor: pointer;
		color: #ff5c38 !important;
	}

	.play-menu-active {
		color: #ff5c38;
	}

	.but:hover {
		cursor: pointer;
		color: #ff0e0b !important;
	}

	.container {
		margin: 0 auto;
        margin-top: 0px;
		width: 80%;
		padding-bottom: 30vh;
	}

	
	.video-title {
		display: flex;
		justify-content: space-between;
	}

	.title-text {
		color: #000;
	}

	.rank-content {
		width: 100%;
		display: flex;
		flex-wrap: wrap;
	}

	.rank-content li {
		width: 15%;
		list-style: none;
		display: flex;
		flex-direction: column;
	}

	.video li {
		width: 13%;
		list-style: none;
		display: flex;
		flex-direction: column;
	}

	.video-img {
		position: relative;
		width: 90%;
		height: 300px;
	}

	.video-img img {
		display: block;
		width: 100%;
		height: 100%;
		border-radius: 5px;
	}

	.video-img span {
		position: absolute;
		right: 15px;
		bottom: 5px;
	}

	.tap_active {

		/* background-color: hsl(29.77deg 15.01% 82.57%); */
		border-radius: 4px;
		color: #00cc4c !important;
	}
	.tap_active2 {
		
		/* background-color: hsl(29.77deg 15.01% 82.57%); */
		border-radius: 4px;
		color: #00cc4c !important;
		border: 1px solid #00cc4c;
	}
    .nodata{
        position: relative;
        width: 100%;
        display: flex;
        align-items: center;
        justify-content: center;
        padding-top: 50px;
    }
    .diy_tip{
        position: absolute;
        top: 6rem;
        font-size: 1.3rem;
        font-family: cursive;
		color: #e5e5e5 !important;
        /* color: cornflowerblue; */
}
.textcolor{
	color: hsla(0,0%,100%,.7);
}
.textcolor:hover{
	color: #098a38;;
}
.classtype span{
	color: #00cc4c;
	background-color: hsla(0,0%,100%,.04);
	border-radius: 4px;
	height: 28px;
    line-height: 28px;
    /* margin-right: 8px; */
    padding: 0 12px;
}
.classtype span:hover{
	color: #098a38;
	
}
.diybtn{
	border: none;
	color: #fff !important;
    background-color: #00cc4c;
    background-image: linear-gradient(90deg,#00cc4c,#07a365);
}
.diybtn:hover{
	border: none;
	color: #fff !important;
    background-color: #179b47;
    background-image: linear-gradient(90deg,#00cc4c,#08cc7e);
}
.cancellbtn:hover{
	
	color: #fff !important;
    background-color: #179b47;
    background-image: linear-gradient(90deg,#00cc4c,#08cc7e);
}
.centers{
	display: flex;
	align-items: center;
	justify-content: center;
}
.titleTag{
	/* background-color: hsla(0,0%,100%,.04); */
    color: #fff;
    padding: 10px 0;
	width: 50%;
	font-weight: 400;
    font-family: serif;
    font-size: 20px;
	display: flex;
	align-items: center;
	height: 84px;
	justify-content: center;
}

.juming{
	/* padding: 2px 80px;
    background: #283125;
    border-radius: 8px; */
    padding: 2px 80px;
    display: flex;
	width: 100%;
    flex-direction: column;
    align-items: center;
    justify-content: center;
	/* background-color: hsla(0,0%,100%,.18); */
	background-color: hsl(0deg 0% 100% / 5%);
	border-radius: 8px;
	/* border: 1px solid #00cc4c; */
}
.juming:hover{
	border: 1px solid #00cc4c;
}
.active_T{
	border: 1px solid #00cc4c;
}
.weixin:hover .weixintupian{
	display: block !important;
}
.tagsize16{
	font-size: 16px;
}
.tagsize20{
	font-size: 20px;
}


.CustomerService {
    position: fixed;
    width: 62px;
    right: 0;
    top: 40%;
    z-index: 50;
    text-align: center;
    background: #0b3753;
    border-radius: 4px;
}

.CustomerService .CustomerService_list {
    display: inline-block;
    width: 100%;
    padding: 15px 0px;
    position: relative;
}

.CustomerService .CustomerService_list:before {
    content: "";
    position: absolute;
    display: inline-block;
    bottom: 0;
    width: 42px;
    height: 1px;
    background: #859ba9;
    left: 0;
    right: 0;
    margin: 0 auto;
}

.CustomerService .CustomerService_list:last-child:before {
    display: none;
}

.CustomerService .CustomerService_list dt {
    font-size: 12px;
    color: #fff;
    margin-top: 10px;
}

.CustomerService .CustomerService_list .CustomerService_list_down {
    position: absolute;
    width: 220px;
    right: 62px;
    background: #0b3753;
    color: #fff;
    height: 100%;
    top: 0;
    line-height: 80px;
    display: none;
}

.CustomerService .CustomerService_list:hover .CustomerService_list_down {
    display: block;
}

.CustomerService .CustomerService_list .CustomerService_list_down img {
    max-width: 100%;
    border: 1px solid #dcdcdc;
}

/* .CustomerService .CustomerService_list:nth-child(2) .CustomerService_list_down {
    width: 300px;
} */

.CustomerService .CustomerService_list:nth-child(3) .CustomerService_list_down {
    width: 90px;
}
@keyframes zoomIn {
	0% {
		opacity: 0;
		-webkit-transform: scale3d(.3, .3, .3);
		-ms-transform: scale3d(.3, .3, .3);
		transform: scale3d(.3, .3, .3)
	}

	50% {
		opacity: 1
	}
}

.zoomIn {
	-webkit-animation-name: zoomIn;
	animation-name: zoomIn
}

.animated {
	-webkit-animation-duration: 1s;
	animation-duration: 1s;
	-webkit-animation-fill-mode: both;
	animation-fill-mode: both
}
@media screen and (max-width: 720px) {
	.mb_container{
		margin: 0 auto;
        margin-top: 0px;
		width: calc( 100vw - 24px);
	}

	.CustomerService{
		display: none;
	}

}
</style>

<style>
.el-button.is-disabled{
	background-color: #00cc4c;
    background-image: linear-gradient(90deg,#00cc4c,#07a365);
}
.cardNameInt>p{
		overflow: hidden !important;
		white-space: nowrap !important;
		text-overflow: ellipsis !important;
	}
.el-dialog__close:hover{
	color: #179b47 !important;
}
.el-checkbox__input.is-checked .el-checkbox__inner, .el-checkbox__input.is-indeterminate .el-checkbox__inner{
	background-color: #179b47 !important;
    background-image: linear-gradient(90deg,#00cc4c,#08cc7e) !important;
}

/* .el-checkbox__inner{
	background-color: #179b47 !important;
    background-image: linear-gradient(90deg,#00cc4c,#08cc7e) !important;
} */
</style>